<template>
	<swiper
		:indicator-dots="true"
		:autoplay="true"
		:interval="3000"
		:duration="1000"
	>
		<swiper-item v-for="item in imgs">
			<image :src="item" mode=""></image>
		</swiper-item>
	</swiper>
</template>

<script setup>
	/**
	 * 接收数据，调用接口，渲染数据即可
	 *
	 **/
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	// 轮播图地址数组
	const imgs = ref([])
	onLoad(async (e) => {
		console.log(e)
		const { id } = e
		const res = await uni.request({
			url: 'https://api-vue-base.itheima.net/api/lol/info',
			method: 'get',
			data: {
				id,
			},
		})
		// console.log(res)
		imgs.value = res.data.data.skins
			.filter((v) => v.mainImg)
			.map((v) => v.mainImg)
	})
</script>

<style>
	swiper {
		height: 400rpx;
	}
	image {
		width: 100%;
		height: 400rpx;
	}
</style>
